<template>
  <div>
    <h1>品类管理</h1>
    <p>当前商品分类ID:{{categoryId}}</p>
    <el-button type="primary" icon="el-icon-plus" style="float: right; transform: translateY(-40px);" @click="$router.push('/addCate')">添加品类</el-button>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="品类ID">
      </el-table-column>
      <el-table-column prop="name" label="品类名称" width="700">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改名称</el-button>
          <el-button type="text" size="small" @click="go(scope.row.id)" v-show="categoryId==0">查看其他子品类</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <!-- <span>这是一段信息</span> -->
      <el-input v-model="value"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCategory, setCateName, getSubtype } from "@/utils/API";
export default {
  data() {
    return {
      tableData: [],
      cateName: "",
      dialogVisible: false,
      value: "",
      categoryId: 0,
      name: ""
    };
  },
  methods: {
    render() {
      getCategory({ categoryId: this.categoryId }).then(res => {
        console.log(res);
        this.tableData = res.slice(0, 20);
      });
    },
    handleClick(row) {
      console.log(row);
      this.categoryId = row.id;
      this.name = row.name;
      this.value = row.name;
      this.dialogVisible = true;
    },
    change() {
      this.name = this.value;
      this.dialogVisible = false;
      setCateName({
        categoryId: this.categoryId,
        categoryName: this.name
      }).then(res => {
        console.log(res);
        getCategory({ categoryId: 100001}).then(res => {
          console.log(res);
          console.log(this.categoryId);
          this.tableData = res;
        });
      });
    },
    go(id) {
      console.log(id);
      this.$router.push(`/categroy/${id}`);
      this.categoryId = id;
      getCategory({ categoryId: this.categoryId }).then(res => {
        this.tableData = res;
      });
    }
  },
  mounted() {
    this.render();
    console.log(this.categoryId);
  }
};
</script>
